<template lang="pug">
  div.timer
    span.tt 距离考试结束还有
    div.tm.warning
      span.txt {{tm.hh}}
      span.txt-2 小时
      span.txt {{tm.mm}}
      span.txt-2 分
      span.txt {{tm.ss}}
      span.txt-2 秒
</template>

<script type="text/ecmascript-6">
import {getRemainingTime} from '../config/common'

export default {
  data() {
    return {
      tm: {},
      biasX: 0,
      biasY: 0,
      win: null
    }
  },
  mounted() {
    this.timer()
    this.setMouseEvent()
  },
  methods: {
    timer() {
      let mt = null
      let startTimer = new Date(`2019/05/20 08:50:00`)
      console.log('startTimer', startTimer)
      getRemainingTime(mt, startTimer, m => {
        console.log('m:', m)
        this.tm = m
      })
    },
    setMouseEvent() {
      this.win = this.$electron.remote.getCurrentWindow()
      document.addEventListener('mousedown', e => {
        switch (e.button) {
          case 0:
            this.biasX = e.x
            this.biasY = e.y
            document.addEventListener('mousemove', this._moveEvent)
            break
          case 2:
            this.$electron.ipcRenderer.send('createSuspensionMenu')
            break
        }
      })
      document.addEventListener('mouseup', () => {
        this.biasX = 0
        this.biasY = 0
        document.removeEventListener('mousemove', this._moveEvent)
      })
    },
    _moveEvent(e) {
      this.win.setPosition(e.screenX - this.biasX, e.screenY - this.biasY)
    }
  }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .timer
    background-color #ffffff
    border 1px solid #009DFF
    text-align center
    height 64px
    display flex
    justify-content center
    align-items center
    .tt
      font-size 24px
      color #333333
      margin-right 20px
    .tm
      color #009DFF
      transition color .5s linear
      .txt
        font-size 42px
        font-weight bold
        font-family "Times New Roman"
        text-shadow 1px 1px 5px rgba(0, 0, 0, .5)
      .txt-2
        font-size 24px
        margin 0 8px

      &.warning
        color #dd0026
</style>
